/* eslint-disable react/no-array-index-key */
/**
 * 人才信息头部
 */
import React, { useState, useEffect } from 'react';
import { Link } from 'umi';
import { Avatar, Row, Icon, Tooltip } from 'antd';
import cn from 'classnames';
import { getDisplayText } from '@/utils/dataDictUtil';
import { SEX } from '../../dictionary';
import styles from './index.less';

function TalentInfoHead({ talent, dutyCom, disableRedirect = false }) {
    const defaultStr = '-';
    const [shortFullOrgName, setShortFullOrgName] = useState('');
    const {
        rankValue,
        organizationName,
        talentAvatar,
        talentName = defaultStr,
        talentSex,
        talentPhone,
        talentEmail,
        talentAge,
        talentWorkYearNum,
        address,
        dutyName,
        resumeChannelName,
        fullPathOrganizationName
    } = talent || {};

    const modifyFullPathOrganizationName = () => {
        const tempArr = fullPathOrganizationName ? fullPathOrganizationName.split('/') : [];
        console.log('modifyFullPathOrganizationName====> ', tempArr);
        if (!tempArr.length) {
            return;
        }
        if (tempArr.length === 1) {
            setShortFullOrgName(tempArr[0]);
            return;
        }
        setShortFullOrgName(`${tempArr[0]}/.../${tempArr[tempArr.length - 1]}`);
    };

    useEffect(() => {
        modifyFullPathOrganizationName(fullPathOrganizationName);
    }, [fullPathOrganizationName]);

    const renderDuty = () => {
        const arr = [dutyName, resumeChannelName].filter(_ => _);
        return (
            arr.length !== 0 && (
                <Row type="flex" align="middle" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>
                    {arr.map((item, index) => (
                        <React.Fragment key={index}>
                            <div>{item}</div>
                            {index !== arr.length - 1 && <div className={styles.split}></div>}
                        </React.Fragment>
                    ))}
                </Row>
            )
        );
    };
    const renderMajor = () => {
        const arr = [
            getDisplayText(SEX, talentSex),
            talentAge !== '0' && talentAge,
            talentWorkYearNum && `${talentWorkYearNum}年`
        ].filter(_ => _);
        return (
            arr.length !== 0 && (
                <Row type="flex" align="middle">
                    <i className={cn('icon', 'iconfont', 'iconinfos_namecard_icon_default1', styles.icon)} />
                    {arr.map((item, index) => (
                        <React.Fragment key={index}>
                            <div>{item}</div>
                            {index !== arr.length - 1 && <div className={styles.split}></div>}
                        </React.Fragment>
                    ))}
                </Row>
            )
        );
    };
    const renderLocation = () => {
        const empty = '';
        if (!address) {
            return empty;
        }
        const location = address?.split(',');
        return (
            <Row type="flex" align="middle">
                <i className={cn('icon', 'iconfont', 'iconinfos_namecard_icon_default', styles.icon)} />
                {location.map((item, index) => (
                    <React.Fragment key={index}>
                        <div>{item}</div>
                        {index !== location.length - 1 && <div className={styles.split}></div>}
                    </React.Fragment>
                ))}
            </Row>
        );
    };

    const renderTalentName = () => {
        if (disableRedirect) {
            return <div className={styles.title}>{talentName}</div>;
        }
        return (
            <Link
                className={styles.title}
                to={{
                    pathname: '/office/personnelManagement/recruitment/resume/detail',
                    query: { id: talent?.resumeId ?? talent?.recruitTalentMatcherId }
                }}
            >
                {talentName}
            </Link>
        );
    };

    return (
        <Row type="flex">
            <Avatar
                style={{ background: 'rgba(248, 249, 248)' }}
                icon={<Icon type="user" style={{ color: 'rgba(0, 0, 0, 0.25)' }}></Icon>}
                size={56}
                src={talentAvatar}
            />
            <div className={styles.box} style={{ marginLeft: 16 }}>
                <Row type="flex" align="middle">
                    {renderTalentName()}
                    {dutyCom || renderDuty()}
                </Row>
                <Row type="flex" align="middle" className={styles.gapWrapper}>
                    {renderMajor()}
                    {talentPhone && (
                        <Row type="flex" align="middle">
                            <i className={cn('icon', 'iconfont', 'iconinfos_phone_icon_default', styles.icon)} />
                            {talentPhone}
                        </Row>
                    )}
                    {talentEmail && (
                        <Row type="flex" align="middle">
                            <i className={cn('icon', 'iconfont', 'iconinfos_mail_icon_default', styles.icon)} />
                            {talentEmail}
                        </Row>
                    )}
                    {renderLocation()}
                    {rankValue && (
                        <Row type="flex" align="middle">
                            <i className={cn('icon', 'iconfont', 'iconwaichushenqing', styles.icon)} />
                            {rankValue}
                        </Row>
                    )}
                    {(organizationName || shortFullOrgName) && (
                        <Row type="flex" align="middle">
                            <i className={cn('icon', 'iconfont', 'iconzuzhijiagouICON', styles.icon)} />
                            <Tooltip
                                getPopupContainer={triggerNode => triggerNode}
                                overlayStyle={{ maxWidth: '700px' }}
                                title={`需求部门：${fullPathOrganizationName || organizationName}`}
                            >
                                {shortFullOrgName || organizationName}
                            </Tooltip>
                        </Row>
                    )}
                </Row>
            </div>
        </Row>
    );
}
export default React.memo(TalentInfoHead);
